<template>
	<div id="container">
		<el-dropdown
			:class="isChosen == true ? 'chosen' : ''"
			trigger="click"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				视频监控
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="on" :disabled="isDisabled">
					<img src="img/监控 (1).png" alt="" />
					查看监控
				</el-dropdown-item>
				<el-dropdown-item command="off">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭监控
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<!-- popup弹窗 -->
		<div id="mapCon">
			<div id="popup" class="ol-popup">
				<a href="#" id="popup-closer" class="ol-popup-closer"></a>
				<div id="popup-content"></div>
			</div>
		</div>
	</div>
</template>

<script>
// 导入 mapState
import { mapState } from 'vuex';

// 定义全局视频监控图层，方便方法调用
var sourceCamera = new ol.source.Vector({
	wrapX: false,
});
var layerCamera = new ol.layer.Vector({
	source: sourceCamera,
	style: new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [0.3, 50],
			anchorOrigin: 'bottom-right',
			anchorXUnits: 'fraction',
			anchorYUnits: 'pixels',
			offsetOrigin: 'top-right',
			// offset:[0,10],
			//图标缩放比例
			scale: 0.3,
			//透明度
			opacity: 1,
			//图标的url
			src: '../../../src/assets/img/camera.png',
		}),
	}),
});
var key; //标记地图点击事件
export default {
	name: 'Video',
	data() {
		return {
			isDisabled: false,
			isChosen: false,
		};
	},
	mounted() {},
	// 摄像头在地图文档的图层 3
	computed: {
		// 批量从vuex中获取数据
		...mapState(['map', 'docLayer']),
	},
	methods: {
		handleCommand(command) {
			if (command == 'on') {
				this.isDisabled = true;
				this.searchVideo();
				this.isChosen = true;
			} else {
				this.isDisabled = false;
				this.remove();
				this.isChosen = false;
			}
		},
		searchVideo() {
			//1、初始化查询结构对象，设置查询结构包含几何信息
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
			queryStruct.IncludeGeometry = true;
			queryStruct.IncludeWebGraphic = true;
			//2、创建一个用于查询的点形状
			var pointObj = new Zondy.Object.Point2D(114, 30);
			//设置点容差半径
			pointObj.nearDis = 10;
			//指定查询规则
			var rule = new Zondy.Service.QueryFeatureRule({
				//是否将要素的可见性计算在内
				EnableDisplayCondition: false,
				//是否完全包含
				MustInside: false,
				//是否仅比较要素的外包矩形
				CompareRectOnly: false,
				//是否相交
				Intersect: true,
			});
			//3、实例化查询参数对象
			var queryParam = new Zondy.Service.QueryParameter({
				geometry: pointObj,
				resultFormat: 'json',
				struct: queryStruct,
				rule: rule,
			});
			//4、实例化地图文档查询服务对象
			var queryService = new Zondy.Service.QueryDocFeature(
				queryParam,
				this.docLayer.name,
				3, //监控在第3图层
				{
					ip: 'localhost',
					port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
				}
			);
			//执行查询操作，querySuccess为查询回调函数
			queryService.query(querySuccess, queryError);
			// 查询失败回调
			function queryError(e) {
				console.log(e);
			}
			var _this = this;
			//查询成功回调
			/* map-layer-source-feature[style,geometry] */
			function querySuccess(result) {
				//停止进度条
				//初始化Zondy.Format.PolygonJSON类
				var format = new Zondy.Format.PolygonJSON();
				//将MapGIS要素JSON反序列化为ol.Feature类型数组
				var features = format.read(result);
				sourceCamera.addFeatures(features);
				/* 将查询到的要素标注显示， */
				_this.map.addLayer(layerCamera);
				// --------------------------------------------------------------------------
				/**
				 * 实现popup的html元素
				 */
				var container = document.getElementById('popup');
				var content = document.getElementById('popup-content');
				var closer = document.getElementById('popup-closer');
				const popup = new ol.Overlay({
					//要转换成overlay的HTML元素
					element: container,
					//当前窗口可见
					autoPan: true,
					//Popup放置的位置
					positioning: 'bottom-center',
					//是否应该停止事件传播到地图窗口
					stopEvent: false,
					autoPanAnimation: {
						//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
						duration: 250,
					},
				});
				_this.map.addOverlay(popup);

				//添加关闭按钮的单击事件（隐藏popup）
				closer.onclick = function () {
					//未定义popup位置
					popup.setPosition(undefined);
					//失去焦点
					closer.blur();
					return false;
				};
				/**
				 * 动态创建popup的具体内容
				 * @param {string} title
				 */
				function addFeatrueInfo(info) {
					//新增标题元素存放监控器编号
					var elementA = document.createElement('h5');
					elementA.style.background = '#2196f3';
					elementA.style.padding = '5px 10px';
					elementA.style.height = '25px';
					elementA.style.color = '#fff';
					setInnerText(elementA, info.att.title);
					// 新建的div元素添加A子节点
					content.appendChild(elementA);
					//新增标题元素存放监控器地址元素
					var elementDiv = document.createElement('div');
					elementDiv.style.border = ' 1px solid rgb(189, 181, 181)';
					elementDiv.style.margin = '10px 0 0 0';
					// 为content添加div子节点;
					var elPositionName = document.createElement('span');
					elPositionName.innerText = '位置：';
					//--- 位置样式---
					elPositionName.style.display = 'inline-block';
					elPositionName.style.padding = '5px 10px';
					elPositionName.style.fontWeight = '700';
					var elPositionContent = document.createElement('span');
					elPositionContent.innerText = info.att.text;
					elPositionContent.style.display = 'inline-block';
					elPositionContent.style.padding = '5px 10px';

					elementDiv.appendChild(elPositionName);
					elementDiv.appendChild(elPositionContent);
					content.appendChild(elementDiv);
					//新增video元素，播放视频
					var elementVideo = document.createElement('video');
					// elementVideo.controls = true;
					elementVideo.style.padding = '10px 10px';
					elementVideo.style.border = ' 1px solid rgb(189, 181, 181)';
					elementVideo.autoplay = true;
					elementVideo.controls = true;
					elementVideo.src = info.att.videoUrl;
					// 为content添加img子节点
					content.appendChild(elementVideo);
				}

				/**
				 * 动态设置元素文本内容（兼容）
				 */
				function setInnerText(element, text) {
					if (typeof element.textContent == 'string') {
						element.textContent = text;
					} else {
						element.innerText = text;
					}
				}
				// 为map添加点击事件监听，渲染弹出popup
				key = _this.map.on('click', function (evt) {
					//判断当前单击处是否有要素，捕获到要素时弹出popup
					var feature = _this.map.forEachFeatureAtPixel(
						evt.pixel,
						function (feature, layer) {
							return feature;
						}
					);
					if (feature) {
						var obj = feature.values_.values_;
						//示例标注点的信息对象
						var featuerInfo = {
							geo: feature,
							att: {
								//标注信息的标题内容
								title: '摄像头：' + obj.编号,
								//标注详细信息链接
								titleURL: 'http://www.openlayers.org/',
								//标注内容简介
								text: obj.位置,
								//标注的图片
								videoUrl: '../../../src/assets/video/监控.mp4',
							},
						};

						//清空popup的内容容器
						content.innerHTML = '';
						//在popup中加载当前要素的具体信息
						addFeatrueInfo(featuerInfo);
						if (popup.getPosition() == undefined) {
							//设置popup的位置, 此时还未打开过popup弹窗
							var position = feature.getGeometry().getCoordinates()[0];
							popup.setPosition(position);
						} else {
							// 如果feature的为新点击的对象, 则赋予popup新的显示位置
							var position = feature.getGeometry().getCoordinates()[0];
							popup.setPosition(position);
						}
					}
				});
			}

			// 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
			_this.map.on('pointermove', function (e) {
				// console.log(e.originalEvent);
				var pixel = _this.map.getEventPixel(e.originalEvent);
				var hit = _this.map.hasFeatureAtPixel(pixel);
				_this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
			});
		},
		// ------------------------------------------------------移除视频监控图层-----------------------------------------------------------------------
		remove() {
			this.map.removeLayer(layerCamera);
			ol.Observable.unByKey(key); //移除点击事件
		},
	},
};
</script>

<style scoped>
.el-dropdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	z-index: 11;
	border-radius: 10px;
	border-bottom: 2px solid white;
	font-size: 16px;
	font-weight: 500;
	background-color: rgba(248, 248, 132, 0.7);
}
.title {
	font-size: 18px;
}
.el-dropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
.chosen {
	/* 激活菜单样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
/* --------------popup弹窗------------------- */
/* popup弹窗 */

.ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 0px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 45px;
	left: -50px;
}

.ol-popup:after,
.ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: '✖';
}

#popup-content {
	padding: 20px;
	padding-bottom: 10px;
	font-size: 14px;
	font-family: '微软雅黑';
}
#popup-content > h5 {
	background: #2196f3;
}

.test {
	display: inline-block;
	border: 2px solid rgb(189, 181, 181);
}
</style>
